<template>
	<view class="bg">
		<view class="task_bg">
			<!-- <view class="sub_title">待签收任务</view> -->
			<view class="task_one">
				<!-- <view class="task_left_top">
					<view class="task_round">
						<image src="../../../static/images/common/task.png" mode=""></image>
					</view>
					<view class="name">{{ item.name }}</view>
				</view> -->
				<view class="task_content">
					<view class="task_name">
						<view class="task_left">任务名称</view>
						<view class="task_right nameFont">{{ taskArr.mainName }}</view>
					</view>
					<view class="task_child">
						<view class="task_test">
							<view class="task_left">子事项</view>
							<view class="task_right childFont">{{ taskArr.subName }}</view>
						</view>
						<view class="task_test">
							<view class="task_left">状态</view>
							<view class="task_right childFont">
								<view class="zt_type1" v-show="taskArr.taskState === '0'">未查看</view>
								<view class="zt_type2" v-show="taskArr.taskState === '1'">未反馈</view>
								<view class="zt_type2" v-show="taskArr.taskState === '2'">已反馈</view>
								<view class="zt_type2" v-show="taskArr.taskState === '3'">逾期</view>
								<view class="zt_type2" v-show="taskArr.taskState === '4'">完成</view>
							</view>
						</view>
						<view class="task_test">
							<view class="task_left">承办人</view>
							<view class="task_right childFont">{{ taskArr.userName }}</view>
						</view>
						<view class="task_test">
							<view class="task_left">任务时限</view>
							<view class="task_right childFont">{{ taskArr.remindDate }}</view>
						</view>
						<view class="task_content">
							<view class="task_btnArr" style="margin-top: 10rpx">
								<!-- <view class="task_btn btn_color1" @tap="plane()">
									<image src="../../../static/images/common/plane.png" mode=""></image>
									<view class="font">批转</view>
								</view> -->
								<view class="task_btn" @click="transact(taskArr.sysId)">
									<image src="../../../static/images/common/transact.png" mode=""></image>
									<view class="font">反馈</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- fkArr -->
			<view class="task_one" style="padding: 0 20rpx; padding-bottom: 30rpx" v-for="(item, index2) in fkArr" :key="index2">
				<view class="task_content">
					<view class="task_child" style="padding: 10rpx">
						<view class="task_test">
							<view class="task_left" style="flex: 2">反馈记录</view>
							<view class="task_right childFont" style="flex: 4">{{item.content}}</view>
						</view>
					</view>
					<view class="task_child2" style="padding: 10rpx">
						<view class="task_test">
							<view class="task_left" style="flex: 2">下一步计划</view>
							<view class="task_right childFont" style="flex: 4" v-if="item.plan">{{item.plan}}</view>
							<view class="task_right childFont" style="flex: 4" v-else>无</view>
						</view>
					</view>
					<view class="task_child2" style="padding: 10rpx">
						<view class="task_test">
							<view class="task_left" style="flex: 2">存在问题</view>
							<view class="task_right childFont" style="flex: 4" v-if="item.problem">{{item.problem}}</view>
							<view class="task_right childFont" style="flex: 4" v-else>无</view>
						</view>
					</view>
					<view class="task_child2" style="padding: 10rpx">
						<view class="task_test">
							<view class="task_left" style="flex: 2">反馈人</view>
							<view class="task_right childFont" style="flex: 4">{{item.senderName}}</view>
						</view>
					</view>
					<view class="task_child2" style="padding: 10rpx">
						<view class="task_test">
							<view class="task_left" style="flex: 2">反馈状态</view>
							<view v-show="item.status == 0" class="task_right childFont" style="flex: 4">未处理</view>
							<view v-show="item.status == 1" class="task_right childFont" style="flex: 4">合格</view>
							<view v-show="item.status == 2" class="task_right childFont" style="flex: 4">重办</view>
							<view v-show="item.status == 3" class="task_right childFont" style="flex: 4">已反馈</view>
						</view>
					</view>
					<view v-if="item.status == 3" class="task_content">
						<view class="task_btnArr" style="margin-top: 10rpx">
							<view class="task_btn btn_color5" @click="banjie(item.sysId)">
								<view class="font">办结</view>
							</view>
						</view>
					</view>

					<!-- <view class="task_btnArr" style="margin-top: 10rpx">
						<view class="task_btn btn_color3" @tap="banJieChongBan(item.sysId, 1)" v-show="item.status != 1 && roleId04 && roleId02 && roleId01">
							<image src="../../../static/images/common/transact.png" mode=""></image>
							<view class="font">办结</view>
						</view>
						<view class="task_btn btn_color2" @tap="banJieChongBan(item.sysId, 2)">
							<image src="../../../static/images/common/recall.png" mode=""></image>
							<view class="font">退回重办</view>
						</view>
					</view> -->
				</view>
			</view>
		</view>
		<!-- 批转 -->
		<u-modal v-model="show" :show-cancel-button="true" :show-title="false" @confirm="confirmSubmit()">
			<view class="popupModel">
				<view class="task_left_top">
					<view class="task_round">
						<image src="../../../static/images/common/plane.png" mode=""></image>
					</view>
					<view class="name">批转</view>
				</view>
				<view class="popupContent">
					<view class="Content">
						<view class="name">经办人</view>
						<view @tap="showselect = true">请选择 ><u-select v-model="showselect" :list="selectList" @confirm="confirmSelect"></u-select>
						</view>
					</view>
					<view class="pizhuan">
						<view class="item" v-for="(item, index) in selecttext" :key="index">
							<view>{{ item }}</view>
							<view class="close" @tap="deleteSelect(index)">X</view>
						</view>
					</view>
				</view>
			</view>
		</u-modal>
		<!-- 办结，重办 -->
		<u-modal v-model="showBC" :show-cancel-button="true" :show-title="false" @confirm="confirmSubmitBC()">
			<view class="popupModel">是否确定{{ banJieCB.name }}？</view>
		</u-modal>

		<u-modal v-model="banjieShow" content="确定办结？" :show-cancel-button="true" @confirm="confirmBanjie()"></u-modal>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
import {
	getTaskrecord,
	getTaskrecordlog,
	getHandletask,
	getEndorseList,
	getSaveTaskUsert,
	insideInsideBack,
	banjieRequest,
} from "../../../request/dcxt";
import { baseUrl1 } from "../../../request/baseUrl";
export default {
	data() {
		return {
			taskArr: {},
			fkArr: [],
			keyword: "",
			show: false,
			banjieId: "",
			banjieShow: false,
			content: "东临碣石，以观沧海",
			recordArr: [],
			showselect: false,
			selecttext: [],
			selectid: [],
			sameSelectList: [],
			selectList: [],
			taskSubId: "",
			taskUnitId: "",
			showBC: false,
			banJieCB: {
				name: "",
				id: "",
				type: "",
			},
			roleId: "",
			roleId04: true,
			roleId02: true,
			userType: true,
			roleId01: true,
			sysId: "",
		};
	},
	onLoad(option) {
		var result = JSON.parse(option.info);
		// this.taskArr = [];
		this.taskArr = result;
		this.sysId = result.sysId;
		// this.taskSubId = result.taskSubId;
		// this.taskUnitId = result.taskUnitId;
		// this.getData(result.taskUnitId);
		// 反馈
		// this.init()
		// insideInsideBack({
		// 	loginerId: uni.getStorageSync("loginId"),
		// 	userTaskId: result.sysId,
		// }).then((res) => {
		// 	this.fkArr = [];
		// 	console.log(res, "反馈反馈反馈反馈反馈反馈");
		// 	if (res.data.data) {
		// 		this.fkArr = res.data.data;
		// 	}
		// });
	},
	onShow() {
		this.init();
		// this.selectList = [];
		// this.fkArr = [];
		// this.recordArr = [];
		// this.getData(this.taskUnitId);
	},
	methods: {
		init() {
			insideInsideBack({
				loginerId: uni.getStorageSync("loginId"),
				userTaskId: this.sysId,
			}).then((res) => {
				this.fkArr = [];
				console.log(res, "反馈反馈反馈反馈反馈反馈");
				if (res.data.data) {
					this.fkArr = res.data.data;
				}
			});
		},
		// 主要领导是否是都察组
		getDeptType(deptType) {
			if (uni.getStorageSync("loginId") == "20201128100000001316") {
				return true;
			}
			if (uni.getStorageSync("userType") == 1) {
				// 督查组可以退回重办
				return true;
			} else {
				// 不是督查组的主要领导 deptType 为false
				if (uni.getStorageSync("userType") == 2) {
					return true;
				} else {
					if (deptType != 1) {
						return true;
					} else {
						return false;
					}
				}
			}
		},
		// 是督查组imp为2才显示反馈
		duChaimp(imp) {
			if (uni.getStorageSync("loginId") == "20201128100000001316") {
				return true;
			}
			if (uni.getStorageSync("userType") == 1) {
				if (imp == 2) {
					return true;
				} else {
					return false;
				}
			} else {
				return true;
			}
		},
		// 攻坚账号
		gongjian() {
			if (uni.getStorageSync("loginId") == "20201128100000001316") {
				return true;
			}
			if (uni.getStorageSync("userType") == 2) {
				return false;
			} else {
				return true;
			}
		},
		fileName(index) {
			var obj;
			if (this.fkArr[index].file) {
				obj = {
					id: this.fkArr[index].file.split(","),
					name: this.fkArr[index].fileName.split(","),
				};
			} else {
				obj = {};
			}
			return obj;
		},
		plane() {
			this.show = true;
		},
		// 选择经办人
		confirmSelect(e) {
			for (let i = 0; i < this.selectList.length; i++) {
				if (this.selectList[i].label == e[0].label) {
					this.selectList.splice(i, 1);
				}
			}
			this.selecttext.push(e[0].label);
			this.selectid.push(e[0].value);
		}, // 删除经办人
		deleteSelect(index) {
			this.selecttext.splice(index, 1);
			this.selectid.splice(index, 1);
			var sum = JSON.parse(JSON.stringify(this.sameSelectList));
			for (let i = 0; i < sum.length; i++) {
				for (let j = 0; j < this.selecttext.length; j++) {
					if (sum[i].label == this.selecttext[j]) {
						sum.splice(i, 1);
					}
				}
			}
			this.selectList = sum;
		},
		// 保存批转
		confirmSubmit() {
			var params = {
				sysId: this.taskUnitId,
				taskSubId: this.taskSubId,
				taskUsers: this.selectid.join(","),
				loginerId: uni.getStorageSync("loginId"),
			};
			getSaveTaskUsert(params).then((res) => {
				if (res.data.code == 200) {
					this.$refs.uToast.show({
						title: "保存批转成功！",
						type: "success",
					});
					this.getData(this.taskUnitId);
				} else {
					this.$refs.uToast.show({
						title: "保存批转失败！",
						type: "error",
					});
				}
			});
		},
		transact(id) {
			uni.navigateTo({
				url: "/pages/dcxt/up_fk/up_fk?id=" + id,
			});
		},
		banjie(id) {
			this.banjieShow = true;
			this.banjieId = id;
		},
		confirmBanjie() {
			banjieRequest({
				loginerId: uni.getStorageSync("loginId"),
				sysId: this.banjieId,
			}).then((res) => {
				console.log(res, "banjei");
				this.$refs.uToast.show({
					title: res.data.message,
					type: "success",
				});
				this.init();
				// /nbrw/index
			});
		},
		downLoad(id) {
			plus.runtime.openURL(baseUrl1 + "/filesUpload/download?id=" + id);
			// uni.downloadFile({
			//   url: baseUrl1 + "/filesUpload/download?id=" + id, //仅为示例，并非真实的资源
			//   success: (res) => {
			//     console.log(res);
			//     if (res.statusCode === 200) {
			//       console.log("下载成功");
			//       this.$refs.uToast.show({
			//         title: "下载成功!",
			//         type: "success",
			//       });
			//     }
			//   },
			// });
		},
		getData(id) {
			var params = {
				loginerId: uni.getStorageSync("loginId"),
				userId: uni.getStorageSync("loginId"),
				taskUnitId: id,
			};
			this.selectList = [];
			// 批转
			getEndorseList(params).then((res) => {
				var result = res.data.data;
				if (res.data.data.length > 0) {
					for (let i = 0; i < result.length; i++) {
						this.selectList.push({
							label: result[i].name,
							value: result[i].sysId,
						});
						this.sameSelectList = JSON.parse(
							JSON.stringify(this.selectList)
						);
					}
				} else {
					this.$refs.uToast.show({
						title: "未找到批转人！",
						type: "error",
						duration: 2000,
					});
				}
			});
			// 流程
			getTaskrecordlog(params).then((res) => {
				this.recordArr = [];
				if (res.data.data) {
					this.recordArr = res.data.data;
				}
			});
		},
		// 办结/重办
		banJieChongBan(id, type) {
			var name;
			if (type == 1) {
				name = "办结";
			}
			if (type == 2) {
				name = "重办";
			}
			this.banJieCB = {
				id: id,
				type: type,
				name: name,
			};
			this.showBC = true;
		},
		confirmSubmitBC() {
			var params = {
				sysId: this.banJieCB.id,
				status: this.banJieCB.type,
				loginerId: uni.getStorageSync("loginId"),
			};
			getHandletask(params).then((res) => {
				if (this.banJieCB.type == 1) {
					if (res.data.code == 200) {
						this.$refs.uToast.show({
							title: "办结成功！",
							type: "success",
						});
						this.getData(this.taskUnitId);
					}
				} else if (this.banJieCB.type == 2) {
					if (res.data.code == 200) {
						this.$refs.uToast.show({
							title: "已退回重办！",
							type: "error",
						});
						this.getData(this.taskUnitId);
					}
				}
			});
		},
	},
};
</script>

<style lang="scss" scoped>
.top_search {
	width: 100vw;
	height: 120rpx;
	background-color: #3988ff;
	display: flex;
	align-items: center;
	padding: 0 20rpx;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;

	.search_screening {
		margin-left: 2%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;

		image {
			width: 32rpx;
			height: 32rpx;
			margin-right: 10rpx;
		}

		.font {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: rgba(255, 255, 255, 0.7);
		}
	}
}

.popupModel {
	position: relative;
	padding-top: 48rpx;
	text-align: center;

	.task_left_top {
		position: absolute;
		top: 0;
		left: 0;
		min-width: 150rpx;
		height: 48rpx;
		background: rgba(48, 116, 255, 0.2);
		border-radius: 24rpx;
		display: flex;
		align-items: center;

		.name {
			font-size: 20rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #3074ff;
			padding: 0 20rpx;
		}

		.task_round {
			width: 48rpx;
			height: 48rpx;
			background: #3074ff;
			z-index: 999;
			box-shadow: 2px 3px 12px 0px rgba(48, 116, 255, 0.4);
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 24rpx;
				height: 24rpx;
			}
		}
	}

	.popupContent {
		padding: 24rpx;

		.Content {
			width: 100%;
			display: flex;
			align-items: center;

			view {
				flex: 1;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
			}

			.name {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #272b32;
			}
		}

		.pizhuan {
			display: flex;
			flex-flow: row wrap;
			justify-content: flex-start;
			padding-left: 20rpx;
			padding-top: 20rpx;

			.item {
				width: 150rpx;
				height: 50rpx;
				line-height: 50rpx;
				text-align: center;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #8992a1;
				border: 1rpx solid #b9bcc2;
				border-radius: 8rpx;
				margin-right: 25rpx;
				margin-bottom: 30rpx;
				position: relative;

				.close {
					width: 40rpx;
					height: 40rpx;
					font-size: 22rpx;
					line-height: 40rpx;
					text-align: center;
					position: absolute;
					top: -20rpx;
					right: -20rpx;
					background-color: red;
					color: white;
					border-radius: 50%;
				}
			}
		}
	}
}

.task_bg {
	// margin-top: 120rpx;

	.task_one {
		background-color: rgba(255, 255, 255, 1);
		padding: 24rpx;
		position: relative;
		margin-bottom: 40rpx;
		box-shadow: 0px 0px 24rpx 0px rgba(48, 116, 255, 0.1);
		border-radius: 24rpx 8rpx 8rpx 8rpx;

		.line {
			width: 1rpx;
			height: calc(100% - 48rpx);
			// background-color: pink;
			position: absolute;
			left: 44rpx;
			top: 24rpx;
			border-left: 1rpx dashed rgba(48, 116, 255, 0.1);
			// z-index: 5;
		}
	}

	.record_flex {
		display: flex;
		align-items: flex-start;
		margin-bottom: 40rpx;

		.record_flex_1 {
			flex: 1;
			padding-left: 25rpx;

			.record_top {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 10rpx;

				.flex_1 {
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: space-between;

					image {
						width: 16rpx;
						height: 14rpx;
					}
				}

				.flex_2 {
					flex: 1.5;
					display: flex;
					align-items: center;
					justify-content: space-between;

					image {
						width: 16rpx;
						height: 14rpx;
					}
				}

				.flex_right {
					display: flex;
					justify-content: flex-end;
					flex: 1;
				}

				.center_font {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #3074ff;
				}

				.name_font {
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #272b32;
				}
			}

			.time {
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #8e9cb3;
			}
		}

		.record_flex_40 {
			width: 40rpx;

			.round {
				width: 40rpx;
				height: 40rpx;
				background: linear-gradient(-30deg, #3074ff 0%, #41baff 100%);
				box-shadow: 2rpx 3rpx 12rpx 0rpx rgba(48, 116, 255, 0.4);
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				z-index: 999999;

				image {
					width: 16rpx;
					height: 16rpx;
				}
			}
		}
	}

	.task_left_top {
		position: absolute;
		top: 0;
		left: 0;
		min-width: 200rpx;
		height: 48rpx;
		background: rgba(48, 116, 255, 0.2);
		border-radius: 24rpx;
		display: flex;
		align-items: center;

		.name {
			font-size: 20rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #3074ff;
			padding: 0 20rpx;
		}

		.task_round {
			width: 48rpx;
			height: 48rpx;
			background: #3074ff;
			z-index: 5;
			box-shadow: 2px 3px 12px 0px rgba(48, 116, 255, 0.4);
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 24rpx;
				height: 24rpx;
			}
		}
	}

	.task_content {
		width: 100%;
		margin-top: 40rpx;

		.task_btnArr {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			margin-top: 40rpx;
		}

		.task_btn {
			background: #3074ff;
			border-radius: 4rpx;
			padding: 8rpx 16rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-left: 20rpx;

			image {
				width: 24rpx;
				height: 24rpx;
				margin-right: 10rpx;
			}

			.more {
				width: 24rpx;
				height: 6rpx;
				margin-right: 10rpx;
			}

			.font {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: rgba(255, 255, 255, 0.7);
			}
		}

		.btn_color1 {
			// background-color: rgba(231, 233, 240, 1);
			background-color: #5cb85c;
		}

		.btn_color2 {
			background-color: rgba(248, 95, 120, 1);
		}

		.btn_color3 {
			background-color: #5cb85c;
		}

		.btn_color5 {
			background-color: #ffd64e;
		}

		.task_name {
			display: flex;
			padding-bottom: 40rpx;
		}

		.task_child2 {
			padding: 20rpx 0;
		}

		.task_child {
			padding: 20rpx 0;
			border-top: 1rpx solid rgba(231, 233, 240, 1);
			border-bottom: 1rpx solid rgba(231, 233, 240, 1);
		}

		.task_test {
			display: flex;
			margin: 20rpx 0;
		}

		.task_left {
			flex: 2;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #8e9cb3;
		}

		.nameFont {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #272b32;
		}

		.task_right {
			flex: 7;
			display: flex;
			align-items: center;
			word-break: break-all;

			.childFont {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #272b32;
				word-break: break-all;
			}

			.zt_type1 {
				margin-left: 10rpx;
				background: #f85f78;
				border-radius: 4rpx;
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: rgba(255, 255, 255, 0.7);
				padding: 0 16rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.zt_type2 {
				margin-left: 10rpx;
				background: rgba(250, 173, 51, 1);
				border-radius: 4rpx;
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: rgba(255, 255, 255, 0.7);
				padding: 0 16rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
}
</style>
